<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">

        <!--省份-->
        <select v-model="pIndex" @change="cIndex=0;zIndex=0">
            <option v-for="(p,index) in province" :value="index">{{p.name}}</option>
        </select>

        <!--
            市: 选中省份对应的市
            province[pIndex]: 选中的省份对象 
            province[pIndex].citys: 打点调用省份对象
        -->
        <select v-model="cIndex" @change="zIndex=0">
            <!---->
            <option v-for="(c,index) in province[pIndex].citys" :value="index">{{c.name}}</option>
        </select>

        <!--
            区: 选中城市对应的区
            province[pIndex].citys[cIndex]: 选中省份中选中的城市对象
        -->
        <select v-model="zIndex">
            <option v-for="(z,index) in province[pIndex].citys[cIndex].zones"  :value="index" >{{z}}</option>
        </select>

    </div>


    <script>
       var app= new Vue({
            el: "#app",
            data: {
                // 记录选中省份的索引
                pIndex:0,
                // 记录选中城市的索引
                cIndex:0,
                // 
                zIndex:0,
                province: [
                        {
                        name: "河南省",
                        citys: [
                            {name: '郑州市',zones: ['二七区', '经开区', '管城区', '金水区', '中原']},
                            {name: '平顶山',zones: ['叶县', '宝丰', '鲁山', '舞阳', '郏县']},
                            {name: '南阳',zones: ['南阳', '北洋', '东阳', '西洋']}
                            ]
                    },
                    {
                        name: '河北',
                        citys: [
                            {name: '石家庄',zones: ['石家庄1', '石家庄2', '石家庄3', '石家庄4',]},
                            {name: '唐山',zones: ['路南区', '路北区', '开元区']}
                        ]
                    },
                    {
                        name: '湖北',
                        citys: [{name: '武汉区',zones: ['洪山区', '器山区', '东区', '西区']},
                            {name: '襄阳',zones: ['襄阳11', '襄阳22', '襄阳33', '襄阳44',]}
                        ]
                    }
                ],
            },
               // 监听
            // watch:{
            //     cIndex: function (newValue){
            //         // 监听到cIndex 发生变化的时候,重置zIndex
            //         // 等价于监听select的change时间的操作
            //         this.zIndex=0;
            //     }
            // }

        })
    </script>
</body>

</html>